<template>
  <div>
    <NavBarVue :title="title" />
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in itemPics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <h3>{{ itemBasicInfo.name }}</h3>
      <div class="item-content" v-html="itemContent"></div>
    </div>
    <!-- 商品行动栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="wap-home-o" text="首页" />
      <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
      <van-action-bar-button type="warning" text="加入购物车" @click="showSku(0)"/>
      <van-action-bar-button type="danger" text="立即购买" @click="showSku(1)"/>
    </van-action-bar>
    <!-- 商品行动栏 -->
    <!-- 商品规格弹窗 -->
    <van-popup v-model:show="skuShow" closeable round position="bottom" :style="{ height: '40%' }">
      <div>
        <van-card :num="itemSku.number" :price="itemSku.minPrice" :title="itemSku.name"
          :thumb="itemSku.pic">
          <template #footer>
            <van-stepper v-model="itemSku.number" />
          </template>
        </van-card>
        <van-button size="large" round type="danger" @click="confirmAction">确定</van-button>
      </div>
    </van-popup>
    <!-- /商品规格弹窗 -->
  </div>
</template>

<script setup lang="ts">
import NavBarVue from '../../components/NavBar.vue';
import { ref, onMounted, reactive } from 'vue';
import { fetchItemDetail, fetchItems } from '@a/index'
import { useRoute } from 'vue-router';
const route = useRoute()
const title = ref<string>('详情页')

// 根据商品id获取商品详情
let itemBasicInfo = ref<any>({})
// 商品规格
let itemSku = ref<any>({})
const itemContent = ref<string>('')
const itemPics = ref<any[]>([])

// 控制商品规格弹窗
const skuShow = ref<boolean>(false)
let clickAction:number = 0 // 0 去购物车 1 去确认订单
const showSku = (action:number) => {
  skuShow.value = true
  clickAction = action
}
// 点击商品规格确定按钮 
const confirmAction = () => {
  if (clickAction === 0) {
    alert('去购物车')
  }else {
    alert('去确认订单')
  }
}

const getItemById = () => {
  fetchItemDetail({
    id: route.query.id
  }).then(res => {
    if (res.data.code === 0) {
      const { basicInfo, content, pics } = res.data.data
      itemBasicInfo.value = basicInfo
      itemContent.value = content.replace(/<img/gi, '<img style="display:block;width:100%"')
      itemPics.value = pics
      title.value = basicInfo.name
      // 商品规格
      itemSku.value = {
        ...basicInfo,
        number: 1
      }
    }

  })
}
onMounted(() => {
  getItemById()
})
</script>

<style scoped lang="scss">
.content {
  padding-top: 46px;

  .my-swipe {
    width: 10rem;
    height: 5rem;

    img {
      width: 10rem;
      height: 5rem;
    }
  }

  /* .item-content{
   :deep img{
      width: 100%;
      display: block;
    }
  } */
}
</style>